<template>
    <div class="seventh">
        <div class="seventh-head">
            <h5 class="head1-h5">公告消息</h5>
            <h5 class="head2-h5" @click="GoNotice">全部 &gt;</h5>
        </div>
        <el-table :data="tableData" style="width: calc(100% - 40px);margin-left:20px ;" :show-header="false">
            <el-table-column fixed prop="date">
                <template slot-scope="scope">
                    <span style="cursor: pointer;" class="con" @click="watch(scope.row)"><i class="el-icon-position"></i>
                        <span style="color: #09B8A0;">[{{
                            scope.row.type }}]</span><span>{{ scope.row.con }}</span></span>
                </template>
            </el-table-column>
        </el-table>

        <!-- 详情弹出框 -->
        <el-dialog title="公告消息" :visible.sync="watchDialog" width="50%">
            <el-form :model="watchData" class="addDiv">
                <el-form-item label="消息类型" :label-width="formLabelWidth">
                    <el-input v-model="watchData.title" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="消息内容" :label-width="formLabelWidth">
                    <el-input v-model="watchData.content" autocomplete="off" type="textarea" :rows="12" disabled></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="watchDialog = false">取 消</el-button>
                <el-button type="primary" @click="watchDialog = false">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            watchDialog: false,
            formLabelWidth: '100px',
            tableData: [
                { title: '人事变更', content: '今天赵三提桶跑路了今天赵三提桶跑路了今天赵三提桶跑路了今天赵三提桶跑路了' },
                { title: '人事变更', content: '今天李四提桶跑路了今天李四提桶跑路了今天李四提桶跑路了今天李四提桶跑路了' },
                { title: '人事变更', content: '今天王五提桶跑路了今天王五提桶跑路了今天王五提桶跑路了今天王五提桶跑路了' },
                { title: '人事变更', content: '今天罗六提桶跑路了今天罗六提桶跑路了今天罗六提桶跑路了今天罗六提桶跑路了' },
                { title: '人事变更', content: '今天罗六提桶跑路了今天罗六提桶跑路了今天罗六提桶跑路了今天罗六提桶跑路了' },
                { title: '人事变更', content: '今天罗六提桶跑路了今天罗六提桶跑路了今天罗六提桶跑路了今天罗六提桶跑路了' },
            ],
            watchData: {
                id: '',
                title: '标题',
                content: '内容内容内容内容内容内容内容内容内容内容内容内容'
            }
        }
    },
    methods: {
        watch(v) {
            this.watchDialog = true
            this.watchData.title = v.type
            this.watchData.content = v.con
        },
        GoNotice() {
            this.$router.push('/home/notice')
        }
    },
    mounted() {
        this.$axios({
            url: '/Notice',
            method: 'get',
            params: {
                _limit: 6,
                _sort: 'id',
                _order: 'desc'
            }
        }).then(({ data }) => {
            this.tableData = data
        })
    }

}
</script>

<style lang="less" scoped>
.seventh {
    width: 488px;
    height: calc(100% - 555px);
    background: white;
    box-shadow: 0px 3px 6px 0px #E1E1E1;
    position: absolute;
    bottom: 10px;
    left: 10px;
    box-sizing: border-box;

    .seventh-head {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #EBEEF5;

        .head1-h5 {
            height: 22px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 22px;
            float: left;
            margin-left: 20px;
            margin-top: 10px;
        }

        .head2-h5 {
            height: 17px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 17px;
            float: right;
            margin-right: 20px;
            margin-top: 14px;
            cursor: pointer;
        }
    }
}

// 设置单行文本省略
.con {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>